<template>
  <div class="user_edit">
    <nav-bar>
      <span slot="text">用户信息</span>
    </nav-bar>
    <div class="container">
      <li>
        <input type="file" @change="uploadAvatar" />
        <span>头像</span>
        <div class="pic" v-if="userInfo && userInfo.avatar">
          <!-- <img :src="imageUrl + userInfo.avatar" alt="" /> -->
          <!-- 测试图片 -->
          <img src="@/assets/images/8.jpg" />
          <i class="iconfont icon-zuojiantou icon"></i>
        </div>
      </li>
      <router-link to="">
        <span>昵称</span>
        <div class="text">
          <span>{{ userInfo.nickname }}</span>
          <i class="iconfont icon-zuojiantou icon"></i>
        </div>
      </router-link>
      <router-link to="/user/info/phone">
        <span>手机号</span>
        <div class="pic">
          <span>{{ userInfo.phone }}</span>
          <i class="iconfont icon-zuojiantou icon"></i>
        </div>
      </router-link>
      <router-link to="/user/info/password">
        <span>密码</span>
        <div class="pic">
          <span>修改密码</span>
          <i class="iconfont icon-zuojiantou icon"></i>
        </div>
      </router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { modifyAvatar } from '@/network/getData';
import { imageUrl } from '@/config/env';
export default {
  data() {
    return {
      imageUrl
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['MODIFY_AVATAR']),
    // 头像上传
    uploadAvatar(e) {
      const file = e.target.files[0];
      const data = new FormData();
      data.append('avatar', file);
      modifyAvatar(this.userInfo.id, data).then(res => {
        if (res.code === 200) {
          this.MODIFY_AVATAR(res.data);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user_edit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  .container {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    li {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid #ccc;
      input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      .pic {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
    a {
      display: flex;
      justify-content: space-between;
      line-height: 35px;
      padding: 0 10px;
      border-bottom: 1px solid #ccc;
      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
